<!DOCTYPE html>
<html lang="en" xmlns="">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 引入 layui.css -->
    <link rel="stylesheet" href="/layui/css/layui.css">
    <!-- 引入 layui.js -->
    <script src="/layui/layui.js"></script>
    <script src="/js/jquery.js"></script>
    <link href="/carousel/css2.css" rel="stylesheet">
    <link rel="stylesheet" href="/carousel/style.css">
    <title>自助式分析系统-数据预处理</title>
    <style>
<!--          ::-webkit-scrollbar{-->
<!--            width: 7px;-->
<!--            height: 7px;-->
<!--            background-color: #F5F5F5;-->
<!--          }-->

<!--          /*定义滚动条轨道 内阴影+圆角*/-->
<!--          ::-webkit-scrollbar-track {-->
<!--            box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);-->
<!--            -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);-->
<!--            border-radius: 10px;-->
<!--            background-color: #F5F5F5;-->
<!--          }-->

<!--          /*定义滑块 内阴影+圆角*/-->
<!--          ::-webkit-scrollbar-thumb{-->
<!--            border-radius: 10px;-->
<!--            box-shadow: inset 0 0 6px rgba(0, 0, 0, .1);-->
<!--            -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .1);-->
<!--            background-color: #c8c8c8;-->
<!--          }-->
        *{
            margin: 0px;
            padding: 0px;
        }
        #main{
            display: flex;
            width: 100vw;
            height: 100vh;
        }
        .left{
            display: flex;
            flex-direction: column;
            width: 15%;
        }
        .right{
            background: white;
        }
        .left-top,.right-top{
            background: linear-gradient(#a1bcf5, #edbefd);
            height: 8vh;
            overflow: hidden;
            text-align: center;
            line-height: 8vh;
            font-weight: bolder;
            font-size: 20px;
            font-family: "STFangsong";
            color: black;
            cursor: pointer;
        }
        .left-middle, .right-middle{
            height: 70vh;
            background-color: white;
        }
        .left-footer{
            background: white;
            text-align: center;
            line-height: 7vh;
            height: 25vh;
            border: 1vh solid #000;
            overflow: hidden;
            z-index: 99 !important;
        }
        .right-footer{
            position: absolute;
            bottom: 0;
            text-align: center;
            line-height:16vh;
            height: 18vh;
            overflow: hidden;
            z-index: 99 !important;
        }
        .middle{
            display: flex;
            flex-direction: column;
            width: 70%;
            background-color: #ffffff;
            z-index: 50;
        }
        .middle-top{
            display: flex;
            height: 40vh;
            position: relative;
            overflow: hidden;
            z-index: 50;
        }
        .middle-middle{
            height: 5vh;
            background-color: #ffffff;
        }
        #round{
            height: 3vh;
            border:1px solid #d2d4e0;
        }
        #order{
            height: 3vh;
        }
        #order-name{
            margin-left:1vh;
        }
        .middle-footer{
            height: 65vh;
            overflow:scroll;
        }
        table th,td {
          border:1px solid #d2d4e0;
          text-align: center;
        }
        .right{
            background: #fbfbfb;
            display: flex;
            flex-direction: column;
            width: 15%;
        }
        .right-top{
            height: 8vh;
        }
        .right-middle{
            width: 15%;
            position: absolute;
            top: 8vh;
        }

        #next{
            cursor: pointer;
            width:30vh;
            height:15vh;
        }
        #select_file{
            display: none;
        }
        #add_file{
            width: 10vh;
            height: 10vh;
            cursor: pointer;
        }
        #add_file:hover {
            content: url("/images/add_files_cur.png");
        }
        #fileNames li, #result_files li{
            font-size: 20px;
            height: 6.8vh;
            text-align: center;
            line-height: 6.8vh;
            border-bottom: 0.2vh solid black;
            color: black;
            font-weight: bolder;
            font-family: "STFangsong";
        }
        .drag_box{
            height: 6.8vh;
            width: 15%;
            cursor: pointer;
            position: absolute;
            z-index: 99;
        }
        .result_box{
            border-bottom: 1px solid black;
            height: 6.8vh;
            width: 100%;
            cursor: pointer;
            position: absolute;
            z-index: 99;
            font-weight: bold;
        }
        #conn1{
            width: 32vh;
            height: 10vh;
            border: 0.5vh solid black;
            position: absolute;
            left: 10vh;
            top: 5vh;
            z-index: 80;
            text-align: center;
            line-height: 10vh;
        }
        #conn2{
            width: 32vh;
            height: 10vh;
            border: 0.5vh solid black;
            position: absolute;
            left: 55vh;
            top: 5vh;
            z-index: 80;
            text-align: center;
            line-height: 10vh;
        }
        #conn3{
            width: 32vh;
            height: 10vh;
            border: 0.5vh solid black;
            position: absolute;
            left: 100vh;
            top: 5vh;
            z-index: 80;
            text-align: center;
            line-height: 10vh;
        }
        #isFileHead_box div{
            overflow: hidden !important;
        }

        @media screen and (max-width: 1200px) {
            #conn1{
                width: 20vh;
                height: 10vh;
                border: 0.5vh solid black;
                position: absolute;
                left: 10vh;
                top: 5vh;
                z-index: 80;
                text-align: center;
                line-height: 10vh;
            }
            #conn2{
                width: 20vh;
                height: 10vh;
                border: 0.5vh solid black;
                position: absolute;
                left: 40vh;
                top: 5vh;
                z-index: 80;
                text-align: center;
                line-height: 10vh;
            }
            #conn3{
                width: 20vh;
                height: 10vh;
                border: 0.5vh solid black;
                position: absolute;
                left: 70vh;
                top: 5vh;
                z-index: 80;
                text-align: center;
                line-height: 10vh;
            }
        }

        @media screen and (max-width: 900px) {
            #conn1{
                width: 20vh;
                height: 7vh;
                border: 0.5vh solid black;
                position: absolute;
                left: 12vh;
                top: 3vh;
                z-index: 80;
                text-align: center;
                line-height: 7vh;
            }
            #conn2{
                width: 20vh;
                height: 7vh;
                border: 0.5vh solid black;
                position: absolute;
                left: 12vh;
                top: 16vh;
                z-index: 80;
                text-align: center;
                line-height: 7vh;
            }
            #conn3{
                width: 20vh;
                height: 7vh;
                border: 0.5vh solid black;
                position: absolute;
                left: 12vh;
                top: 30vh;
                z-index: 80;
                text-align: center;
                line-height: 7vh;
            }
            .left {
                display: flex;
                flex-direction: column;
                width: 25%;
            }
            .right {
                display: flex;
                flex-direction: column;
                width: 25%;
            }
        }
        .conn_select{
            height: 100%;
            width: 100%;
            padding: 0 5vh;
            margin: 0;
        }
        option{
            text-align:center;
        }
        #conn_tb tr{
            height: 5vh;
        }
        #conn_tb td{
            height: 5vh;
            width: 30vh;
        }
        #data_tb{
            line-height: 3vh;
        }
        #data_head tr th{
            padding: 2px 10px;
        }
        .result_box{
            text-align: center;
            line-height: 6.8vh;
        }
        #conn_file_name{
            height: 3vh;
            text-align: center;
        }
        #count{
            height: 3vh;
            text-align: center;
        }
        #func{
            height: 3vh;
        }
        .col_name{
            width: 10vh;
            height: 3vh;
            text-align: center;
        }
        #data_head th{
            background: linear-gradient(#f1f1f1, #ac6ed494);
        }
        #data_body td{
            background: linear-gradient(#efe1e1, #de91ce94);
        }
        .paging{
            margin: auto;
        }
        #next_page:hover{
            color: #409eff;

        }
        #next_page{
            cursor: pointer;

        }
    </style>
</head>
<body>

    <div id="main">
        <div class="left">
            <div class="left-top" id="sql_input" title="点击连接数据库">
                <img src="/images/database.png" style="position: relative;" height="35" width="40">
                数据库导入表
            </div>
            <div class="left-middle" title="点击表名加载数据">
                <ul id="fileNames">
                    <div class="drag_box" id="dl0" draggable="true"  ondragstart="setFileName(event)"
                         ondragend="update_title(event)"></div>
                    <li id="l0" class="tl"></li>
                    <div class="drag_box" id="dl1" draggable="true"  ondragstart="setFileName(event)"
                         ondragend="update_title(event)"></div>
                    <li id="l1" class="tl"></li>
                    <div class="drag_box" id="dl2" draggable="true"  ondragstart="setFileName(event)"
                         ondragend="update_title(event)"></div>
                    <li id="l2" class="tl"></li>
                    <div class="drag_box" id="dl3" draggable="true"  ondragstart="setFileName(event)"
                         ondragend="update_title(event)"></div>
                    <li id="l3" class="tl"></li>
                    <div class="drag_box" id="dl4" draggable="true"  ondragstart="setFileName(event)"
                         ondragend="update_title(event)"></div>
                    <li id="l4" class="tl"></li>
                    <div class="drag_box" id="dl5" draggable="true"  ondragstart="setFileName(event)"
                         ondragend="update_title(event)"></div>
                    <li id="l5" class="tl"></li>
                    <div class="drag_box" id="dl6" draggable="true"  ondragstart="setFileName(event)"
                         ondragend="update_title(event)"></div>
                    <li id="l6" class="tl"></li>
                    <div class="drag_box" id="dl7" draggable="true"  ondragstart="setFileName(event)"
                         ondragend="update_title(event)"></div>
                    <li id="l7" class="tl"></li>
                    <div class="drag_box" id="dl8" draggable="true"  ondragstart="setFileName(event)"
                         ondragend="update_title(event)"></div>
                    <li id="l8" class="tl"></li>
                    <div class="drag_box" id="dl9" draggable="true"  ondragstart="setFileName(event)"
                         ondragend="update_title(event)"></div>
                    <li id="l9" class="tl"></li>
                </ul>
            </div>
            <div class="left-footer" id="file">
                <input type="file" id="select_file" >
                <br>
                <img src="/images/add_files.png" id="add_file" title="点击上传文件">
                <br>
                <span id="tips">拖拽或点击选择文件</span>
            </div>

        </div>
        <div class="middle" style="position: relative;">
            <div class="middle-top" id="conn_box">
                <table id="conn_tb">
                    <thead>
                    <tr>
                        <th style="width: 60vh;height:20px;background: linear-gradient(#a1bcf5, #edbefd);color:black;">连接表名</th>
                        <th style="width: 20vh;height:20px;background: linear-gradient(#a1bcf5, #edbefd);color:black;">连接字段</th>
                        <th style="width: 80vh;height:20px;background: linear-gradient(#a1bcf5, #edbefd);color:black;" colspan="5">操作</th>
                    </tr>
                    </thead>
                    <tbody>
                            <tr>
                                <td id="conn01" class="conn_cell" draggable="true"  ondragstart="del_conn(event)"
                         ondragend="del_conn_end(event)"></td>
                                <td id="conn01_col">
                                </td>
                                <td style="font-size: 20px;font-weight: bold;background: #fffbf0;">表连接</td>
                                <td style="background: #e0eee8;">
                                    <span id="col_opr" style="font-size: 20px;font-weight: bold;">字段操作</span>
                                </td>
                                <td style="background: #c0ebd7;">
                                    <span id="order2_name" style="font-size: 20px;font-weight: bold;">常用函数</span>
                                </td>
                                <td style="background: #FFFBDE;">
                                    <span id="order3_name" style="font-size: 20px;font-weight: bold;">计数</span>
                                </td>
                                <td style="background: #f6d1ff;">
                                    <span style="font-size: 20px;font-weight: bold;">分组聚合</span>
                                </td>

                            </tr>
                            <tr>
                                <td id="conn02" class="conn_cell" draggable="true"  ondragstart="del_conn(event)"
                         ondragend="del_conn_end(event)"></td>
                                <td id="conn02_col"></td>
                                <td style="background: #fffbf0;">
                                    <button type="button" class="layui-btn layui-btn-normal" id="test_conn">测试连接</button>
                                </td>
                                <td style="background: #e0eee8;">
                                    <button id="split_bt" class="layui-btn layui-btn-disabled" type="button">拆分</button></td>
                                <td style="background: #c0ebd7;">
                                    <select id="func">
                                      <option value="-1">请选择函数</option>
                                      <option value="sum">求和</option>
                                      <option value="avg">平均值</option>
                                      <option value="max">最大值</option>
                                      <option value="min">最小值</option>
                                      <option value="variance">方差</option>
                                      <option value="standard">标准差</option>
                                    </select>
                                </td>
                                <td style="background: #FFFBDE;">
                                    <input type="text" id="count_col_name" class="col_name" placeholder="新表名称">
                                </td>
                                <td style="background: #f6d1ff;">
                                    <input type="text" id="group_agg_name" class="col_name" placeholder="新表名称">
                                </td>

                            </tr>
                            <tr>
                                <td id="conn03" class="conn_cell" draggable="true"  ondragstart="del_conn(event)"
                         ondragend="del_conn_end(event)"></td>
                                <td id="conn03_col"></td>
                                <td style="background: #fffbf0;">
                                    <button type="button" class="layui-btn layui-btn-warm" id="conn_result">暂未连接</button>
                                </td>
                                <td style="background: #e0eee8;">
                                    <button id="merge_bt" class="layui-btn layui-btn-disabled" type="button">合并</button>
                                </td>
                                <td style="background: #c0ebd7;">
                                    <input type="text" id="fun_col_name" class="col_name" placeholder="新字段名称">&emsp;
                                </td>
                                <td style="background: #FFFBDE;">
                                    <button id="count_bt" class="layui-btn layui-btn-disabled" type="button">计数</button>
                                </td>
                                <td id="select_key" style="font-weight: bold;background: #f6d1ff;cursor: pointer;" title="点击后选择列作为key">
                                    选择key
                                </td>


                            </tr>
                            <tr>
                                <td id="conn04" class="conn_cell" draggable="true"  ondragstart="del_conn(event)"
                         ondragend="del_conn_end(event)"></td>
                                <td id="conn04_col"></td>
                                <td style="background: #fffbf0;">
                                    <input type="text" id="conn_file_name" placeholder="连接文件名">&emsp;
                                </td>
                                <td style="background: #e0eee8;">
                                    <button id="col_del" class="layui-btn layui-btn-disabled" type="button">删除</button>
                                </td>
                                <td style="background: #c0ebd7;">
                                    <button id="func_bt" class="layui-btn layui-btn-disabled" type="button">操作</button>
                                </td>
                                <td style="background: #D6ECD1;">
                                    <span id="order_name" style="font-size: 20px;font-weight: bold;">字段排序</span>
                                </td>
                                 <td style="background: #f6d1ff;">
                                    <button id="group_bt" class="layui-btn layui-btn-disabled" type="button">分组聚合</button>
                                </td>
                            </tr>
                            <tr>
                                <td id="conn05" class="conn_cell" draggable="true"  ondragstart="del_conn(event)"
                         ondragend="del_conn_end(event)"></td>
                                <td id="conn05_col"></td>
                                <td style="background: #fffbf0;">
                                    <button type="button" class="layui-btn layui-btn-normal" id="save_conn">保存连接结果</button>
                                </td>
                                <td style="background: #e0eee8;">
                                    <button id="filter_bt" class="layui-btn layui-btn-disabled" type="button">过滤</button>
                                </td>
                                 <td style="background: #A4E2C2;">
                                     <button id="rollback_bt" class="layui-btn layui-btn-disabled" type="button">回滚</button>
                                 </td>
                                <td style="background: #D6ECD1;">
                                    <button  id="asc" class="layui-btn layui-btn-disabled" type="button">升序</button>
                                </td>
                                <td style="background: #ecd1d1;" rowspan="2">
                                    <button  id="oneClick" class="layui-btn layui-btn-disabled" type="button">一键分析</button>
                                </td>
                            </tr>
                            <tr>
                                <td id="conn06" class="conn_cell" draggable="true"  ondragstart="del_conn(event)"
                         ondragend="del_conn_end(event)"></td>
                                <td id="conn06_col"></td>
                                <td style="background: #d6ecf0;">
                                    <span style="font-size: 20px;font-weight: bold;">更改列名</span>
                                </td>
                                <td style="background: #d6ecf0;">
                                    <input type="text" id="col_new_name" class="col_name" placeholder="更改字段名称">&emsp;
                                </td>
                                 <td style="background: #d6ecf0;">

                                     <button id="col_update" class="layui-btn layui-btn-disabled" type="button">更改</button>
                                 </td>
                                <td style="background: #D6ECD1;">
                                    <button  id="desc" class="layui-btn layui-btn-disabled" type="button">降序</button>
                                </td>
<!--                                <td style="background: #ecd1d1;">-->
<!--                                    <button  id="show_all" class="layui-btn layui-btn-disabled" type="button">模型与预测</button>-->
<!--                                </td>-->
                            </tr>

                    </tbody>
                </table>
            </div>
            <div class="middle-footer">
                <table id="data_tb">
                    <thead id="data_head">
                    </thead>
                     <tbody id="data_body">
                     </tbody>
                </table>

            </div>
            <div id="pages_1" style="display: none;">
                <div class="_page_container">
                    <ul class="_pages _pages_2">
                        <li class="_prev_ _iconfont iconzuo"></li>
                        <li class="_pages_li_2 _active_2 _disabled" data-index="10">0</li>
                        <li class="_pages_li_2" data-index="11">1</li>
                        <li class="_pages_li_2" data-index="12">2</li>
                        <li class="_pages_li_2" data-index="13">3</li>
                        <li class="_pages_li_2" data-index="14">4</li>
                        <li class="_pages_li_2" data-index="15">5</li>
                        <li class="_pages_li_2" data-index="16">6</li>
                        <li class="_pages_li_2" data-index="17">7</li>
                        <li class="_pages_li_2" data-index="18">8</li>
                        <li class="_next_ _iconfont iconGroup-"></li>
                    </ul><div class="_jumper"><span class="_count">共 X 页</span>
                    <span id="next_page">前往</span>
                    <input class="_jumper_input" type="number" min="1" max="20" value="0">
                    <span>页</span>
                </div>
                </div>
            </div>

        </div>
        <div class="right">
            <div class="right-top" id="rf_title">
                <img src="/images/data.png" style="position: relative;" height="35" width="40">
                操作后数据结果
            </div>
            <div class="right-middle">
                <ul id="result_files">
                    <div class="result_box" id="fl0" draggable="true"  ondragstart="set_result_file(event)"
                         ondragend="del_result_file(event)"></div>
                    <li id="f0" class="tl"></li>
                    <div class="result_box" id="fd1" draggable="true"  ondragstart="set_result_file(event)"
                         ondragend="del_result_file(event)"></div>
                    <li id="f1" class="tl"></li>
                    <div class="result_box" id="fd2" draggable="true"  ondragstart="set_result_file(event)"
                         ondragend="del_result_file(event)"></div>
                    <li id="f2" class="tl"></li>
                    <div class="result_box" id="fd3" draggable="true"  ondragstart="set_result_file(event)"
                         ondragend="del_result_file(event)"></div>
                    <li id="f3" class="tl"></li>
                    <div class="result_box" id="fd4" draggable="true"  ondragstart="set_result_file(event)"
                         ondragend="del_result_file(event)"></div>
                    <li id="f4" class="tl"></li>
                    <div class="result_box" id="fd5" draggable="true"  ondragstart="set_result_file(event)"
                         ondragend="del_result_file(event)"></div>
                    <li id="f5" class="tl"></li>
                    <div class="result_box" id="fd6" draggable="true"  ondragstart="set_result_file(event)"
                         ondragend="del_result_file(event)"></div>
                    <li id="f6" class="tl"></li>
                    <div class="result_box" id="fd7" draggable="true"  ondragstart="set_result_file(event)"
                         ondragend="del_result_file(event)"></div>
                    <li id="f7" class="tl"></li>
                    <div class="result_box" id="fd8" draggable="true"  ondragstart="set_result_file(event)"
                         ondragend="del_result_file(event)"></div>
                    <li id="f8" class="tl"></li>
                    <div class="result_box" id="fd9" draggable="true"  ondragstart="set_result_file(event)"
                         ondragend="del_result_file(event)"></div>
                    <li id="f9" class="tl"></li>
                </ul>
            </div>
            <div class="right-footer" title="点击进入图表制作">
                <marquee  behavior="scroll" direction="right" scrollamount="20">
                <img src="/images/rocket_.png" style="border:none;background: white;" class="layui-btn layui-btn-disabled" id="next">
                </marquee>
            </div>
        </div>
    </div>
</body>
<link rel="stylesheet" href="/css/pagination.css">
<script src="/js/pagination.js"></script>
</html>
<script type="text/javascript">
    /* ---------------------定义变量------------------------ */
    // 记录文件数量
    var file_size = 0;
    // 记录文件名
    var file_list = [];
    // 计时器 删除文件
    var timeout ;
    // 选中文件
    var curr_temp_id;
    // 记录连接表
    var conn_list = [];
    // 存放当前选中的列
    var column_list = [];
    // 选中文件
    var curr_temp_id;
    // 当前拖拽的表名
    var curr_conn;
    // 当前拖拽的下标
    var curr_index;
    // 测试连接的表的下标以及连接字段
    var ct_index_col = {};
    // 连接表数据
    var conn_data;
    // 连接表表头
    var conn_heads;
    // 保存文件数量
    var save_file_size = 0;
    // 记录保存文件名
    var save_file_list = [];
    // 当前操作的表
    var curr_file_index;
    // 分组的key
    var group_key = "";
    // 查询的行数
    var is_all = 'false';
    // 是否为连接文件
    var is_conn =  false;
    // 连接文件名
    var conn_file = null;
    // 记录当前页数
    var curr_page = 0;

    /* --------------------一键分析------------------------*/
    $("#oneClick").click(function(){
        var url = '/show_chart/'+curr_file_index;
        window.open(url, "_blank");
    });
    /* --------------------删除行------------------------*/
    function row_del(){
        $.ajax({
            type: "get",
            url: "/row_del/"+$(this).attr('row_index')+'-'+curr_file_index,
            contentType: "application/json;charset=UTF-8",
            success: function(result){
                if(result.status === 'success'){
                    get_data(curr_file_index, curr_page);
                    column_list.length = 0;
                    $('#col_del').attr('class', 'layui-btn layui-btn-disabled');
                    $('#split_bt').attr('class', 'layui-btn layui-btn-disabled');
                    $('#asc').attr('class', 'layui-btn layui-btn-disabled');
                    $('#desc').attr('class', 'layui-btn layui-btn-disabled');
                    $('#func_bt').attr('class', 'layui-btn layui-btn-disabled');
                    $('#filter_bt').attr('class', 'layui-btn layui-btn-disabled');
                    $('#rollback_bt').attr('class', 'layui-btn');
                    $('#merge_bt').attr('class', 'layui-btn layui-btn-disabled');
                    $('#count_bt').attr('class', 'layui-btn layui-btn-disabled');
                    $("#col_update").attr('class', 'layui-btn layui-btn-disabled');
                    $("#group_bt").attr('class', 'layui-btn layui-btn-disabled');
                }
            }
        });
    }
    /* --------------------点击选择key------------------------*/
    $("#select_key").click(function(){
        if($(this).attr('className') !=  'curr'){
            $(this).css('background', 'rgb(230 184 230)');
            $(this).attr('className', 'curr');
        }else{
            $(this).css('background', '#f6d1ff');
            $(this).attr('className', '');
        }

    })
    /* --------------------过滤------------------------*/
    $("#filter_bt").click(function(){
        if(column_list.length == 1){
            var win = window.open('/get_data_filter/'+curr_file_index+"+"+column_list[0], 'newwindow', 'height=600, width=600, top=150, left=300, toolbar=no, menubar=no, scrollbars=no, resizable=no, location=no, status=no');
            var timer = setInterval(function() {
                if(win.closed) {
                    $.ajax({
                        //请求方式
                        type : "GET",
                        //请求的媒体类型
                        contentType: "application/json;charset=UTF-8",
                        //请求地址
                        url : "/check_filter",
                        //请求成功
                        success : function(result) {
                            if(result.status === 'success'){
                                $('#l'+file_size).css('background', 'linear-gradient(rgb(239, 220, 243), rgb(171, 255, 94))');
                                $('#l'+file_size).text(result.filter_name);
                                get_data(file_size, 0);
                                file_size ++;
                                file_list.push(result.filter_name);
                            }
                        },
                        //请求失败，包含具体的错误信息
                        error : function(e){
                            console.log(e);
                        }
                    });

                    clearInterval(timer);

                    column_list.length = 0;
                    $('#col_del').attr('class', 'layui-btn layui-btn-disabled');
                    $('#split_bt').attr('class', 'layui-btn layui-btn-disabled');
                    $('#merge_bt').attr('class', 'layui-btn layui-btn-disabled');
                    $('#asc').attr('class', 'layui-btn layui-btn-disabled');
                    $('#desc').attr('class', 'layui-btn layui-btn-disabled');
                    $('#func_bt').attr('class', 'layui-btn layui-btn-disabled');
                    $('#filter_bt').attr('class', 'layui-btn layui-btn-disabled');
                    $('#merge_bt').attr('class', 'layui-btn layui-btn-disabled');
                    $('#count_bt').attr('class', 'layui-btn layui-btn-disabled');
                    $("#col_update").attr('class', 'layui-btn layui-btn-disabled');
                    $("#group_bt").attr('class', 'layui-btn layui-btn-disabled');
                }
            }, 0);
        }
    })
    /* --------------------拆分------------------------*/
    $("#split_bt").click(function(){
        if(column_list.length == 1){
            var win = window.open('/get_col_split/'+curr_file_index+"+"+column_list[0], 'newwindow', 'height=600, width=500, top=150, left=300, toolbar=no, menubar=no, scrollbars=no, resizable=no, location=no, status=no');
            var timer = setInterval(function() {
                if(win.closed) {
                    column_list.length = 0;
                    clearInterval(timer);
                    get_data(curr_file_index, curr_page);
                    $('#rollback_bt').attr('class', 'layui-btn');
                    $('#col_del').attr('class', 'layui-btn layui-btn-disabled');
                    $('#split_bt').attr('class', 'layui-btn layui-btn-disabled');
                    $('#merge_bt').attr('class', 'layui-btn layui-btn-disabled');
                    $('#asc').attr('class', 'layui-btn layui-btn-disabled');
                    $('#desc').attr('class', 'layui-btn layui-btn-disabled');
                    $('#func_bt').attr('class', 'layui-btn layui-btn-disabled');
                    $('#filter_bt').attr('class', 'layui-btn layui-btn-disabled');
                    $('#merge_bt').attr('class', 'layui-btn layui-btn-disabled');
                    $('#count_bt').attr('class', 'layui-btn layui-btn-disabled');
                    $("#col_update").attr('class', 'layui-btn layui-btn-disabled');
                    $("#group_bt").attr('class', 'layui-btn layui-btn-disabled');
                }
            }, 0);
        }
    })
    /* --------------------保存结果文件------------------------*/
    $("#next").click(function(){
        if(save_file_list.length > 0 && $("#next").attr('class') == "layui-btn"){
            var file_index = [];
            var file_name = [];
            // 获取
            for(i in save_file_list){
                for(j in file_list){
                    if(save_file_list[i] == file_list[j]){
                        file_index.push(j);
                        file_name.push(file_list[j])
                    }
                }
            }
            $.ajax({
                //请求方式
                type : "POST",
                //请求的媒体类型
                contentType: "application/json;charset=UTF-8",
                //请求地址
                url : "/save_result",
                //数据，json字符串
                data :  JSON.stringify({
                    'file_index': file_index,
                    'file_name': file_name
                }),
                //请求成功
                success : function(result) {
                    if(result.status === 'success'){
                        window.open('/create_chart', "_blank");
                    }
                },
                //请求失败，包含具体的错误信息
                error : function(e){
                    console.log(e);
                }
            });
        }
    })
    /* --------------------合并------------------------*/
    $("#merge_bt").click(function (){
         if(column_list.length > 1 && $("#merge_bt").attr('class') == "layui-btn"){
              $.ajax({
                //请求方式
                type : "POST",
                //请求的媒体类型
                contentType: "application/json;charset=UTF-8",
                //请求地址
                url : "/col_merge/"+curr_file_index,
                //数据，json字符串
                data :  JSON.stringify({
                    'column_list':column_list
                }),
                //请求成功
                success : function(result) {
                    if(result.status === 'success'){
                        get_data(curr_file_index, curr_page);
                        column_list.length = 0;
                        $('#rollback_bt').attr('class', 'layui-btn');
                        $('#col_del').attr('class', 'layui-btn layui-btn-disabled');
                        $('#split_bt').attr('class', 'layui-btn layui-btn-disabled');
                        $('#asc').attr('class', 'layui-btn layui-btn-disabled');
                        $('#desc').attr('class', 'layui-btn layui-btn-disabled');
                        $('#func_bt').attr('class', 'layui-btn layui-btn-disabled');
                        $('#filter_bt').attr('class', 'layui-btn layui-btn-disabled');
                        $('#merge_bt').attr('class', 'layui-btn layui-btn-disabled');
                        $('#count_bt').attr('class', 'layui-btn layui-btn-disabled');
                        $("#col_update").attr('class', 'layui-btn layui-btn-disabled');
                        $("#group_bt").attr('class', 'layui-btn layui-btn-disabled');

                    }
                },
                //请求失败，包含具体的错误信息
                error : function(e){
                    console.log(e);
                }
            });
         }
    });
    /* --------------------回滚------------------------*/
    $("#rollback_bt").click(function (){
         if($("#rollback_bt").attr('class') == "layui-btn"){
              $.ajax({
                //请求方式
                type : "GET",
                //请求的媒体类型
                contentType: "application/json;charset=UTF-8",
                //请求地址
                url : "/rollback",
                //请求成功
                success : function(result) {
                    if(result.status === 'success'){
                        get_data(curr_file_index, curr_page);
                        column_list.length = 0;
                        $('#col_del').attr('class', 'layui-btn layui-btn-disabled');
                        $('#split_bt').attr('class', 'layui-btn layui-btn-disabled');
                        $('#rollback_bt').attr('class', 'layui-btn layui-btn-disabled');
                        $('#asc').attr('class', 'layui-btn layui-btn-disabled');
                        $('#desc').attr('class', 'layui-btn layui-btn-disabled');
                        $('#func_bt').attr('class', 'layui-btn layui-btn-disabled');
                        $('#filter_bt').attr('class', 'layui-btn layui-btn-disabled');
                        $('#merge_bt').attr('class', 'layui-btn layui-btn-disabled');
                        $('#count_bt').attr('class', 'layui-btn layui-btn-disabled');
                        $("#col_update").attr('class', 'layui-btn layui-btn-disabled');
                        $("#group_bt").attr('class', 'layui-btn layui-btn-disabled');
                    }
                },
                //请求失败，包含具体的错误信息
                error : function(e){
                    console.log(e);
                }
            });
         }
    });
    /* --------------------更改字段名------------------------*/
    $("#col_update").click(function (){
         if(column_list.length == 1 && $("#col_new_name").val().length > 0 && $("#col_update").attr('class') == "layui-btn"){
              $.ajax({
                //请求方式
                type : "POST",
                //请求的媒体类型
                contentType: "application/json;charset=UTF-8",
                //请求地址
                url : "/col_change/"+curr_file_index,
                //数据，json字符串
                data :  JSON.stringify({
                    'column_list':column_list,
                    'col_new_name': $("#col_new_name").val()
                }),
                //请求成功
                success : function(result) {
                    if(result.status === 'success'){
                        get_data(curr_file_index, curr_page);
                        column_list.length = 0;
                        $('#col_del').attr('class', 'layui-btn layui-btn-disabled');
                        $('#split_bt').attr('class', 'layui-btn layui-btn-disabled');
                        $('#asc').attr('class', 'layui-btn layui-btn-disabled');
                        $('#desc').attr('class', 'layui-btn layui-btn-disabled');
                        $('#func_bt').attr('class', 'layui-btn layui-btn-disabled');
                        $('#filter_bt').attr('class', 'layui-btn layui-btn-disabled');
                        $('#rollback_bt').attr('class', 'layui-btn layui-btn-disabled');
                        $('#merge_bt').attr('class', 'layui-btn layui-btn-disabled');
                        $('#count_bt').attr('class', 'layui-btn layui-btn-disabled');
                        $("#col_update").attr('class', 'layui-btn layui-btn-disabled');
                        $("#group_bt").attr('class', 'layui-btn layui-btn-disabled');
                    }
                },
                //请求失败，包含具体的错误信息
                error : function(e){
                    console.log(e);
                }
            });
         }
    });
    /* --------------------删除表字段------------------------*/
    $("#col_del").click(function select_col(){
         if(column_list.length > 0 && $("#col_del").attr('class') == "layui-btn"){
              $.ajax({
                //请求方式
                type : "POST",
                //请求的媒体类型
                contentType: "application/json;charset=UTF-8",
                //请求地址
                url : "/col_del/"+curr_file_index,
                //数据，json字符串
                data :  JSON.stringify({
                    'column_list':column_list
                }),
                //请求成功
                success : function(result) {
                    if(result.status === 'success'){
                        get_data(curr_file_index, curr_page);
                        column_list.length = 0;
                        $('#col_del').attr('class', 'layui-btn layui-btn-disabled');
                        $('#split_bt').attr('class', 'layui-btn layui-btn-disabled');
                        $('#asc').attr('class', 'layui-btn layui-btn-disabled');
                        $('#desc').attr('class', 'layui-btn layui-btn-disabled');
                        $('#func_bt').attr('class', 'layui-btn layui-btn-disabled');
                        $('#filter_bt').attr('class', 'layui-btn layui-btn-disabled');
                        $('#rollback_bt').attr('class', 'layui-btn');
                        $('#merge_bt').attr('class', 'layui-btn layui-btn-disabled');
                        $('#count_bt').attr('class', 'layui-btn layui-btn-disabled');
                        $("#col_update").attr('class', 'layui-btn layui-btn-disabled');
                        $("#group_bt").attr('class', 'layui-btn layui-btn-disabled');
                    }
                },
                //请求失败，包含具体的错误信息
                error : function(e){
                    console.log(e);
                }
            });
         }
    });
    /* --------------------检测新字段名称变化------------------------*/

    $("#col_new_name").bind('input propertychange',function(){
        if($("#col_new_name").val().length > 0 && column_list.length === 1){
            $("#col_update").attr('class', 'layui-btn');
        }else{
            $("#col_update").attr('class', 'layui-btn layui-btn-disabled');
        }
    });
    $("#group_agg_name").bind('input propertychange',function(){
        if($("#group_agg_name").val().length > 0 && column_list.length >= 2 && group_key.length > 0){
            $("#group_bt").attr('class', 'layui-btn');
        }else{
            $("#group_bt").attr('class', 'layui-btn layui-btn-disabled');
        }
    });
    $("#fun_col_name").bind('input propertychange',function(){
        if($("#fun_col_name").val().length > 0 && column_list.length > 1 && $("#func").val() != -1){
            $("#func_bt").attr('class', 'layui-btn');
        }else{
            $("#func_bt").attr('class', 'layui-btn layui-btn-disabled');
        }
    });
    $("#count_col_name").bind('input propertychange',function(){
        if($("#count_col_name").val().length > 0 && column_list.length == 1){
            $("#count_bt").attr('class', 'layui-btn');
        }else{
            $("#count_bt").attr('class', 'layui-btn layui-btn-disabled');
        }
    });
    $("#func").change(function(){
        if($("#fun_col_name").val().length > 0 && column_list.length > 1 && $("#func").val() != -1){
            $("#func_bt").attr('class', 'layui-btn');
        }else{
            $("#func_bt").attr('class', 'layui-btn layui-btn-disabled');
        }
    });
    $("#count").bind('input propertychange',function(){
        if($("#count_col_name").val().length > 0 && column_list.length == 1){
            $("#count_bt").attr('class', 'layui-btn');
        }else{
            $("#count_bt").attr('class', 'layui-btn layui-btn-disabled');
        }
    });
    /* --------------------保存连接结果------------------------*/
    $("#save_conn").click(function(){
        if($("#conn_result").attr('class') === 'layui-btn' && conn_file != null && $("#conn_file_name").val().length > 0){
            $.ajax({
                type: "get",
                url: "/save_conn",
                contentType: "application/json;charset=UTF-8",
                success: function(result){
                    if(result.status === 'success'){
                        is_conn = false;
                        conn_file = null;
                        $('#l'+file_size).css('background', 'linear-gradient(rgb(239, 220, 243), rgb(171, 255, 94))');
                        $('#l'+file_size).text($("#conn_file_name").val());
                        file_size ++;
                        file_list.push($("#conn_file_name").val());

                    }else{
                         console.log('获取失败');
                    }
                }
            });
        }
    });
    /* --------------------监听文件拖拽进入删除文件区域------------------------*/
    // 删除结果文件
    function delete_save_file(e){
        e.preventDefault();//阻止浏览器的默认事件
        switch(e.type){
            // 进入目标元素
            case 'dragenter':
                break;
            // 经过目标元素
            case 'dragover':
                break;
            // 离开目标元素
            case 'dragleave':

                break;
            // 释放元素
            case 'drop':
                var del_class = e.dataTransfer.getData("del_class");
                var del_id = e.dataTransfer.getData("del_id");
                var del_name = e.dataTransfer.getData("del_name");

                if(del_class == 'result_box' && del_name.length > 0){
                    // 删除连接表里该表的列
                    $("#"+del_id).text("");
                    $("#"+del_id).css("background", "white");
                    var index;
                    for(var i = 0; i < save_file_list.length; i++){
                        if(save_file_list[i] === del_name){
                            index = i;
                        }
                    }
                    save_file_list.splice(index,1,save_file_list[save_file_size-1]);
                    save_file_list.pop();
                    save_file_size --;
                }
                if(save_file_size == 0){
                    $("#next").attr("class", "layui-btn layui-btn-disabled");
                    $("#next").attr("src", "/images/rocket_.png");
                }
                e.dataTransfer.clearData("del_id");
                e.dataTransfer.clearData("del_class");
                e.dataTransfer.clearData("del_name");
                break;
        }
    }
    // 添加事件监听
    var del_save = document.getElementById("rf_title");
    del_save.addEventListener("dragenter",delete_save_file,false);
    del_save.addEventListener("dragover",delete_save_file,false);
    del_save.addEventListener("dragleave",delete_save_file,false);
    del_save.addEventListener("drop",delete_save_file,false);
    /* --------------------监听文件拖拽进入保存文件区域------------------------*/
    function save_result_file(e){
        e.preventDefault();//阻止浏览器的默认事件
        switch(e.type){
            // 进入目标元素
            case 'dragenter':
                break;
            // 经过目标元素
            case 'dragover':
                break;
            // 离开目标元素
            case 'dragleave':
                break;
            // 释放元素
            case 'drop':

                var name = e.dataTransfer.getData("name");
                // 判断表名是否存在
                if(name.length > 0){
                    var result_box_list = document.getElementsByClassName('result_box');
                    // 如果表名已经存在
                    if(save_file_list.indexOf(name) >= 0){
                        [].forEach.call(result_box_list, function(current,index){
                            if(current.innerText == name && current.id != e.target.id){
                                current.style.background = 'white';
                                current.innerText = "";
                            }
                            e.target.innerText = name;
                            e.target.style.background = 'linear-gradient(#efdcf3, #abff5e)';
                        })
                    //表名不存在
                    }else{
                        // 写进div
                        e.target.innerText = name;
                        e.target.style.background = 'linear-gradient(#efdcf3, #abff5e)';
                        save_file_list.push(name);
                        save_file_size ++;
                    }

                }
                get_cols(name);
                e.dataTransfer.clearData("name");
                if(save_file_size > 0){
                    $("#next").attr("class", "layui-btn");
                    $("#next").attr("src", "/images/rocket.png");
                }
                var cc = $(".conn_cell")
                for(var i = 0; i < cc.length; i++){
                    cc[i].style.background = 'white';
                    if(cc[i].innerText == "拖拽到此进行表连接"){
                        cc[i].innerText = "";

                    }
                }

                break;
        }
    }
    var result_boxes = document.getElementsByClassName("result_box");
    [].forEach.call(result_boxes,function(current,index){
        current.addEventListener("dragenter",save_result_file,false);
        current.addEventListener("dragover",save_result_file,false);
        current.addEventListener("dragleave",save_result_file,false);
        current.addEventListener("drop",save_result_file,false);
    });
    /* --------------------设置删除结果文件------------------------*/
    function set_result_file(e){
        if(e.target.innerText.length > 0){
            e.dataTransfer.setData("del_id", e.target.id)
            e.dataTransfer.setData("del_name", e.target.innerText)
            e.dataTransfer.setData("del_class", e.target.className)
            $("#rf_title").css('background','linear-gradient(#f54444, #edbefd)');
            $("#rf_title").text('拖拽到此删除');
        }
    }
    /* --------------------删除结果文件------------------------*/
    function del_result_file(e){
            $("#rf_title").css('background','linear-gradient(#a1bcf5, #edbefd)');
            $("#rf_title").html('<img src="/images/data.png" style="position: relative;" height="35" width="40">操作后数据结果')
    }

    /* --------------------查看连接结果------------------------*/
    $("#conn_result").click(function (){
        if($(this).attr('class') === 'layui-btn'){
            get_data(conn_file, 0);
            $('#show_all').attr('class', 'layui-btn layui-btn-disabled');

        }
    });

    /* --------------------重写数据------------------------*/
    function refresh_data(heads, data, page_index){
        column_list.length = 0;
        $("#temp").html("");
        if(heads.length > 0){
             $("#data_head").html("");
            var head_str = "<tr><th>操作</th>";
            for(var i = 0; i < heads.length; i++){
                head_str += "<th class='c"+i+" cell' isSelect='false' style='padding-inline: 2vh'>"+heads[i]+"</th>"
            }
            $("#data_head").html(head_str+"</tr>");
        }
        var data_str = "";
        for(var i = 0; i < data.length; i++){
            data_str += "<tr><td class='row_del' row_index="+(((page_index-1)*100)+i)+"  style='background: linear-gradient(#9949c5, #d291de);cursor:pointer;color:white;'>删除</td>"
            for(var j = 0; j < data[i].length; j++){
                data_str += "<td class='c"+j+" cell' isSelect='false'>"+data[i][j]+"</td>"
            }
            data_str += "<tr>";
        }
        $("#data_body").html(data_str);
        $(".cell").bind("click", cell_click);
        $(".row_del").bind("click", row_del);
        $("#data_head").children("th").css("background", "linear-gradient(#f1f1f1, #ac6ed494)");
        $("#data_body").children("td").css("background", "linear-gradient(#efe1e1, #de91ce94)");
    }

    /* --------------------点击查看数据------------------------*/
    $('.drag_box').click(function(e){
        if($("#"+$(this).attr('Id').substr(1,2)).text().length > 0){
            var temp_index = $(this).attr('Id').substr(2,1);
            $("#show_all").attr('class', 'layui-btn');
            $("#show_part").attr('class', 'layui-btn layui-btn-disabled');
            is_all = 'false';
            $('#show_all').attr('class', 'layui-btn');
            $('#show_part').attr('class', 'layui-btn layui-btn-disabled');
            get_data(temp_index, 0);
        }
    })
    /* --------------------请求数据------------------------*/
    function get_data(index, page_index){
        // 发ajax请求获取数据
            $.ajax({
                type: "post",
                url: "/get_data",
                data :  JSON.stringify({
                    'index': index,
                    'is_conn': is_conn,
                    'page_index': page_index
                }),
                contentType: "application/json;charset=UTF-8",
                success: function(result){
                    if(result.status === 'success'){
                        $("#oneClick").attr("class", "layui-btn");
                        $("#pages_1").css('display', 'block');
                        new Pagination({
                            element: '#pages_1',
                            type: 2,
                            pageIndex: result.page_index,
                            pageSize: 100,
                            pageCount: 9,
                            total: result.lines_num,
                            jumper: true,
                            singlePageHide: false,
                            disabled: true,
                            currentChange: function(index) {

                                get_data(curr_file_index, index);
                            }
                        });
                        curr_page = result.page_index;
                        refresh_data(result.heads, result.data, result.page_index);
                        curr_file_index = index;

                    }else{
                    }
                }
            });
    }
    $('.result_box').click(function(e){
        if($(this).text().length > 0){

            var temp_index;
            for(var i = 0; i < file_list.length; i++){
                if($(this).text() === file_list[i]){
                    temp_index = i;
                }
            }
            get_data(temp_index, curr_page);
        }

    })


    /* --------------------删除表连接------------------------*/
    function del_conn(e){
        if(e.target.innerText.length > 0){
            e.dataTransfer.setData("conn_id", e.target.id)
            e.dataTransfer.setData("id", e.target.id)
            e.dataTransfer.setData("className", e.target.className)
            $("#sql_input").css('background','linear-gradient(#f54444, #edbefd)');
            $("#sql_input").text('拖拽到此删除');
        }
    }
    function del_conn_end(e){
        if(e.target.innerText.length > 0){
            $("#sql_input").css('background','linear-gradient(#a1bcf5, #edbefd)');
            $("#sql_input").html('<img src="/images/database.png" style="position: relative;" height="35" width="40">数据库导入表');
        }

    }
    /* --------------------测试连接------------------------- */
    $("#test_conn").click(function(){
        ct_index_col = {};
        var conn_cells = $('.conn_cell');
        for(var i = 0; i < conn_cells.length;i++ ){
            if(conn_cells[i].innerText.length > 0){
                var temp_id = conn_cells[i].id;
                // 获取相应的文件下标
                for(index in file_list){
                    if(conn_cells[i].innerText == file_list[index]){
                        ct_index_col[index] = $("#"+temp_id+'_s').val();
                    }
                }
            }
        }
        var c_len = Object.keys(ct_index_col).length
        if(c_len >= 2 && c_len <= 5){
            $.ajax({
            type: "post",
            url: "/test_conn",
            data :  JSON.stringify({
                'data': ct_index_col,
            }),
            contentType: "application/json;charset=UTF-8",
            success: function(result){
                if(result.status === 'success'){
                    conn_file = result.filename;
                    is_conn = true;
                    $('#conn_result').attr('class','layui-btn');
                    $('#conn_result').text('查看结果');
                }else{
                    $('#conn_result').attr('class','layui-btn layui-btn-warm');
                    $('#conn_result').text('连接失败');
                }
            }
        });
        }
    });
    /* ---------------------字段排序------------------------ */
    //升序
    $("#asc").click(function select_col(){
         if(column_list.length > 0 && $("#asc").attr('class') == "layui-btn"){
              $.ajax({
                //请求方式
                type : "POST",
                //请求的媒体类型
                contentType: "application/json;charset=UTF-8",
                //请求地址
                url : "/ascending_order/"+curr_file_index,
                //数据，json字符串
                data :  JSON.stringify({
                    'column_list':column_list
                }),
                //请求成功
                success : function(result) {
                    if(result.status === 'success'){
                        get_data(curr_file_index, curr_page);
                        column_list.length = 0;
                        $('#rollback_bt').attr('class', 'layui-btn');
                        $('#col_del').attr('class', 'layui-btn layui-btn-disabled');
                        $('#split_bt').attr('class', 'layui-btn layui-btn-disabled');
                        $('#asc').attr('class', 'layui-btn layui-btn-disabled');
                        $('#desc').attr('class', 'layui-btn layui-btn-disabled');
                        $('#func_bt').attr('class', 'layui-btn layui-btn-disabled');
                        $('#filter_bt').attr('class', 'layui-btn layui-btn-disabled');
                        $('#merge_bt').attr('class', 'layui-btn layui-btn-disabled');
                        $('#count_bt').attr('class', 'layui-btn layui-btn-disabled');
                        $("#col_update").attr('class', 'layui-btn layui-btn-disabled');
                        $("#group_bt").attr('class', 'layui-btn layui-btn-disabled');
                    }
                },
                //请求失败，包含具体的错误信息
                error : function(e){
                    console.log(e);
                }
            });
         }
    });
    //降序
    $("#desc").click(function(){
        if(column_list.length > 0  && $("#desc").attr('class') == "layui-btn"){
            $.ajax({
                  //请求方式
                  type : "POST",
                  //请求的媒体类型
                  contentType: "application/json;charset=UTF-8",
                  //请求地址
                  url : "/descending_order/"+curr_file_index,
                  //数据，json字符串
                  data :  JSON.stringify({
                    'column_list':column_list
                  }),
                  //请求成功
                  success : function(result) {
                      if(result.status === 'success'){
                          get_data(curr_file_index, curr_page);
                          column_list.length = 0;
                          $('#rollback_bt').attr('class', 'layui-btn');
                          $('#col_del').attr('class', 'layui-btn layui-btn-disabled');
                          $('#split_bt').attr('class', 'layui-btn layui-btn-disabled');
                          $('#asc').attr('class', 'layui-btn layui-btn-disabled');
                          $('#desc').attr('class', 'layui-btn layui-btn-disabled');
                          $('#func_bt').attr('class', 'layui-btn layui-btn-disabled');
                          $('#filter_bt').attr('class', 'layui-btn layui-btn-disabled');
                          $('#merge_bt').attr('class', 'layui-btn layui-btn-disabled');
                          $('#count_bt').attr('class', 'layui-btn layui-btn-disabled');
                          $("#col_update").attr('class', 'layui-btn layui-btn-disabled');
                          $("#group_bt").attr('class', 'layui-btn layui-btn-disabled');
                      }
                  },
                  //请求失败，包含具体的错误信息
                  error : function(e){
                      console.log(e);
                  }
            });
        }
    });
     /* ---------------------常用函数------------------------ */
     //求和
     $("#func_bt").click(function(){
        if($("#func").val() == "sum" && column_list.length > 1 && $('#fun_col_name').val().length > 0
        && $("#func_bt").attr('class') == "layui-btn"){
          $.ajax({
            //请求方式
            type : "POST",
            //请求的媒体类型
            contentType: "application/json;charset=UTF-8",
            //请求地址
            url : "/data_sum/"+curr_file_index,
            //数据，json字符串
            data :  JSON.stringify({
                'column_list':column_list,
                'new_col': $('#fun_col_name').val()
            }),
            //请求成功
            success : function(result) {

               if(result.status === 'success'){
                  get_data(curr_file_index, curr_page);
                  column_list.length = 0;
                  $('#rollback_bt').attr('class', 'layui-btn');
                  $('#col_del').attr('class', 'layui-btn layui-btn-disabled');
                  $('#split_bt').attr('class', 'layui-btn layui-btn-disabled');
                  $('#asc').attr('class', 'layui-btn layui-btn-disabled');
                  $('#desc').attr('class', 'layui-btn layui-btn-disabled');
                  $('#func_bt').attr('class', 'layui-btn layui-btn-disabled');
                  $('#filter_bt').attr('class', 'layui-btn layui-btn-disabled');
                  $('#merge_bt').attr('class', 'layui-btn layui-btn-disabled');
                  $('#count_bt').attr('class', 'layui-btn layui-btn-disabled');
                  $("#col_update").attr('class', 'layui-btn layui-btn-disabled');
                  $("#group_bt").attr('class', 'layui-btn layui-btn-disabled');
               }
            },
            //请求失败，包含具体的错误信息
            error : function(e){
                console.log(e);
            }
        });
        }
    });
    //平均数
     $("#func_bt").click(function(){
        if($("#func").val() == "avg" && column_list.length > 0 && $("#func_bt").attr('class') == "layui-btn"){
          $.ajax({
            //请求方式
            type : "POST",
            //请求的媒体类型
            contentType: "application/json;charset=UTF-8",
            //请求地址
            url : "/data_mean/"+curr_file_index,
            //数据，json字符串
            data :  JSON.stringify({
                'column_list':column_list,
                'new_col': $('#fun_col_name').val()
            }),
            //请求成功
            success : function(result) {
               if(result.status === 'success'){
                  get_data(curr_file_index, curr_page);
                  column_list.length = 0;
                  $('#rollback_bt').attr('class', 'layui-btn');
                  $('#col_del').attr('class', 'layui-btn layui-btn-disabled');
                  $('#split_bt').attr('class', 'layui-btn layui-btn-disabled');
                  $('#asc').attr('class', 'layui-btn layui-btn-disabled');
                  $('#desc').attr('class', 'layui-btn layui-btn-disabled');
                  $('#func_bt').attr('class', 'layui-btn layui-btn-disabled');
                  $('#filter_bt').attr('class', 'layui-btn layui-btn-disabled');
                  $('#merge_bt').attr('class', 'layui-btn layui-btn-disabled');
                  $('#count_bt').attr('class', 'layui-btn layui-btn-disabled');
                  $("#col_update").attr('class', 'layui-btn layui-btn-disabled');
                  $("#group_bt").attr('class', 'layui-btn layui-btn-disabled');
               }
            },
            //请求失败，包含具体的错误信息
            error : function(e){
                console.log(e);
            }
        });
        }
    });
    //最大值
     $("#func_bt").click(function(){
        if($("#func").val() == "max" && column_list.length > 0 && $("#func_bt").attr('class') == "layui-btn"){
          $.ajax({
            //请求方式
            type : "POST",
            //请求的媒体类型
            contentType: "application/json;charset=UTF-8",
            //请求地址
            url : "/data_max/"+curr_file_index,
            //数据，json字符串
            data :  JSON.stringify({
                'column_list':column_list,
                'new_col': $('#fun_col_name').val()
            }),
            //请求成功
            success : function(result) {
               if(result.status === 'success'){
                  get_data(curr_file_index, curr_page);
                  column_list.length = 0;
                  $('#rollback_bt').attr('class', 'layui-btn');
                  $('#col_del').attr('class', 'layui-btn layui-btn-disabled');
                  $('#split_bt').attr('class', 'layui-btn layui-btn-disabled');
                  $('#asc').attr('class', 'layui-btn layui-btn-disabled');
                  $('#desc').attr('class', 'layui-btn layui-btn-disabled');
                  $('#func_bt').attr('class', 'layui-btn layui-btn-disabled');
                  $('#filter_bt').attr('class', 'layui-btn layui-btn-disabled');
                  $('#merge_bt').attr('class', 'layui-btn layui-btn-disabled');
                  $('#count_bt').attr('class', 'layui-btn layui-btn-disabled');
                  $("#col_update").attr('class', 'layui-btn layui-btn-disabled');
                  $("#group_bt").attr('class', 'layui-btn layui-btn-disabled');
               }
            },
            //请求失败，包含具体的错误信息
            error : function(e){
                console.log(e);
            }
        });
        }
    });
    //最小值
    $("#func_bt").click(function(){
        if($("#func").val() == "min" && column_list.length > 0 && $("#func_bt").attr('class') == "layui-btn"){
          $.ajax({
            //请求方式
            type : "POST",
            //请求的媒体类型
            contentType: "application/json;charset=UTF-8",
            //请求地址
            url : "/data_min/"+curr_file_index,
            //数据，json字符串
            data :  JSON.stringify({
                'column_list':column_list,
                'new_col': $('#fun_col_name').val()
            }),
            //请求成功
            success : function(result) {
               if(result.status === 'success'){
                  get_data(curr_file_index, curr_page);
                  column_list.length = 0;
                  $('#rollback_bt').attr('class', 'layui-btn');
                  $('#col_del').attr('class', 'layui-btn layui-btn-disabled');
                  $('#split_bt').attr('class', 'layui-btn layui-btn-disabled');
                  $('#asc').attr('class', 'layui-btn layui-btn-disabled');
                  $('#desc').attr('class', 'layui-btn layui-btn-disabled');
                  $('#func_bt').attr('class', 'layui-btn layui-btn-disabled');
                  $('#filter_bt').attr('class', 'layui-btn layui-btn-disabled');
                  $('#merge_bt').attr('class', 'layui-btn layui-btn-disabled');
                  $('#count_bt').attr('class', 'layui-btn layui-btn-disabled');
                  $("#col_update").attr('class', 'layui-btn layui-btn-disabled');
                  $("#group_bt").attr('class', 'layui-btn layui-btn-disabled');
               }
            },
            //请求失败，包含具体的错误信息
            error : function(e){
                console.log(e);
            }
        });
        }
    });
    //计数
     $("#count_bt").click(function(){
          if(column_list.length == 1 && $("#count_bt").attr('class') == "layui-btn"
          && $("#count_col_name").val().length > 0){
              $.ajax({
                //请求方式
                type : "POST",
                //请求的媒体类型
                contentType: "application/json;charset=UTF-8",
                //请求地址
                url : "/data_count/"+curr_file_index,
                //数据，json字符串
                data :  JSON.stringify({
                    'column_list':column_list[0],
                }),
                //请求成功
                success : function(result) {
                    if(result.status === 'success'){
                      $('#l'+file_size).css('background', 'linear-gradient(rgb(239, 220, 243), rgb(171, 255, 94))');
                      $('#l'+file_size).text($("#count_col_name").val());
                      get_data(file_size, curr_page);
                      file_size ++;
                      file_list.push($("#count_col_name").val());
                      column_list.length = 0;
                      $('#col_del').attr('class', 'layui-btn layui-btn-disabled');
                      $('#split_bt').attr('class', 'layui-btn layui-btn-disabled');
                      $('#asc').attr('class', 'layui-btn layui-btn-disabled');
                      $('#desc').attr('class', 'layui-btn layui-btn-disabled');
                      $('#func_bt').attr('class', 'layui-btn layui-btn-disabled');
                      $('#filter_bt').attr('class', 'layui-btn layui-btn-disabled');
                      $('#merge_bt').attr('class', 'layui-btn layui-btn-disabled');
                      $('#count_bt').attr('class', 'layui-btn layui-btn-disabled');
                      $("#col_update").attr('class', 'layui-btn layui-btn-disabled');
                      $("#group_bt").attr('class', 'layui-btn layui-btn-disabled');

                   }

                },
                //请求失败，包含具体的错误信息
                error : function(e){
                    console.log(e);
                }
            });
          }
    });
    //分组聚合
     $("#group_bt").click(function(){
          if(column_list.length >= 2 && $("#group_bt").attr('class') == "layui-btn"
          && $("#group_agg_name").val().length > 0 && group_key.length > 0){
              $.ajax({
                //请求方式
                type : "POST",
                //请求的媒体类型
                contentType: "application/json;charset=UTF-8",
                //请求地址
                url : "/group_agg/"+curr_file_index,
                //数据，json字符串
                data :  JSON.stringify({
                    'column_list':column_list,
                    'group_key': group_key
                }),
                //请求成功
                success : function(result) {
                    if(result.status === 'success'){
                      $('#l'+file_size).css('background', 'linear-gradient(rgb(239, 220, 243), rgb(171, 255, 94))');
                      $('#l'+file_size).text($("#group_agg_name").val());
                      get_data(file_size, curr_page);
                      file_size ++;
                      file_list.push($("#group_agg_name").val());
                      column_list.length = 0;
                      $('#col_del').attr('class', 'layui-btn layui-btn-disabled');
                      $('#split_bt').attr('class', 'layui-btn layui-btn-disabled');
                      $('#asc').attr('class', 'layui-btn layui-btn-disabled');
                      $('#desc').attr('class', 'layui-btn layui-btn-disabled');
                      $('#func_bt').attr('class', 'layui-btn layui-btn-disabled');
                      $('#filter_bt').attr('class', 'layui-btn layui-btn-disabled');
                      $('#merge_bt').attr('class', 'layui-btn layui-btn-disabled');
                      $('#count_bt').attr('class', 'layui-btn layui-btn-disabled');
                      $("#col_update").attr('class', 'layui-btn layui-btn-disabled');
                      $("#group_bt").attr('class', 'layui-btn layui-btn-disabled');
                      $("#select_key").text("选择key");
                      $("#select_key").css("background", "rgb(246, 209, 255)");
                      group_key = "";

                   }

                },
                //请求失败，包含具体的错误信息
                error : function(e){
                    console.log(e);
                }
            });
          }
    });
    /* ---------------------差值计算------------------------ */
    //标准差
     $("#func_bt").click(function(){
        if($("#func").val() == "standard" && column_list.length > 0 && $("#func_bt").attr('class') == "layui-btn"){
          $.ajax({
            //请求方式
            type : "POST",
            //请求的媒体类型
            contentType: "application/json;charset=UTF-8",
            //请求地址
            url : "/data_std/"+curr_file_index,
            //数据，json字符串
            data :  JSON.stringify({
                'column_list':column_list,
                'new_col': $('#fun_col_name').val()
            }),
            //请求成功
            success : function(result) {
               if(result.status === 'success'){
                  get_data(curr_file_index, curr_page);
                  column_list.length = 0;
                  $('#rollback_bt').attr('class', 'layui-btn');
                  $('#col_del').attr('class', 'layui-btn layui-btn-disabled');
                  $('#split_bt').attr('class', 'layui-btn layui-btn-disabled');
                  $('#asc').attr('class', 'layui-btn layui-btn-disabled');
                  $('#desc').attr('class', 'layui-btn layui-btn-disabled');
                  $('#func_bt').attr('class', 'layui-btn layui-btn-disabled');
                  $('#filter_bt').attr('class', 'layui-btn layui-btn-disabled');
                  $('#merge_bt').attr('class', 'layui-btn layui-btn-disabled');
                  $('#count_bt').attr('class', 'layui-btn layui-btn-disabled');
                  $("#col_update").attr('class', 'layui-btn layui-btn-disabled');
                  $("#group_bt").attr('class', 'layui-btn layui-btn-disabled');
               }
            },
            //请求失败，包含具体的错误信息
            error : function(e){
                console.log(e);
            }
        });
        }
    });

    //方差
    $("#func_bt").click(function(){
        if($("#func").val() == "variance" && column_list.length > 0 && $("#func_bt").attr('class') == "layui-btn"){
          $.ajax({
            //请求方式
            type : "POST",
            //请求的媒体类型
            contentType: "application/json;charset=UTF-8",
            //请求地址
            url : "/data_var/"+curr_file_index,
            //数据，json字符串
            data :  JSON.stringify({
                'column_list':column_list,
                'new_col': $('#fun_col_name').val()
            }),
            //请求成功
            success : function(result) {
               if(result.status === 'success'){
                  get_data(curr_file_index, curr_page);
                  column_list.length = 0;
                  $('#rollback_bt').attr('class', 'layui-btn');
                  $('#col_del').attr('class', 'layui-btn layui-btn-disabled');
                  $('#split_bt').attr('class', 'layui-btn layui-btn-disabled');
                  $('#asc').attr('class', 'layui-btn layui-btn-disabled');
                  $('#desc').attr('class', 'layui-btn layui-btn-disabled');
                  $('#func_bt').attr('class', 'layui-btn layui-btn-disabled');
                  $('#filter_bt').attr('class', 'layui-btn layui-btn-disabled');
                  $('#merge_bt').attr('class', 'layui-btn layui-btn-disabled');
                  $('#count_bt').attr('class', 'layui-btn layui-btn-disabled');
                  $("#col_update").attr('class', 'layui-btn layui-btn-disabled');
                  $("#group_bt").attr('class', 'layui-btn layui-btn-disabled');
               }
            },
            //请求失败，包含具体的错误信息
            error : function(e){
                console.log(e);
            }
        });
        }
    });
    /* ---------------------选择连接字段------------------------ */
    //获取连接字段
    function get_cols(name){
        var file_index;
        var conn_id;
        var temp = $('.conn_cell');
        for(index in file_list){
            if(file_list[index] == name){
                file_index = index;
            }
        }
        for(var i = 0; i < temp.length; i++){
            if(name == temp[i].innerText){
                conn_id = temp[i].id;
                curr_index = conn_id.substr(4,2);
            }
        }
        if(file_index != undefined){
            $.ajax({
                type: "get",
                url: "/get_table_col/"+file_index,
                contentType: "application/json;charset=UTF-8",
                success: function(result){
                    if(result.status === 'success'){
                        $("#conn"+curr_index+"_col").html("");
                        var temp = "";
                        temp += "<select id='conn"+ curr_index + "_s' class='conn_select'>";
                        temp += "<option>纵向连接</option>";
                        for(index in result.columns){
                           temp += "<option>"+result.columns[index]+"</option>";
                        };
                        temp += "</select>";
                        $("#"+conn_id+"_col").html(temp);
                    }else{

                    }
                }
            });
        }
    }


    /* -------------------表连接拖拽------------------------ */

    // 拖拽表连接
    function conn_table(e){
        e.preventDefault();//阻止浏览器的默认事件
        switch(e.type){
            // 进入目标元素
            case 'dragenter':
                break;
            // 经过目标元素
            case 'dragover':
                break;
            // 离开目标元素
            case 'dragleave':
                break;
            // 释放元素
            case 'drop':
                var name = e.dataTransfer.getData("name");
                // 判断表名是否存在
                if(name.length > 0){

                    var cell_list = document.getElementsByClassName('conn_cell');
                    // 如果表名已经存在
                    if(conn_list.indexOf(name) >= 0){

                        [].forEach.call(cell_list, function(current,index){
                            if(current.innerText == name && current.id != e.target.id){
                                $("#"+current.id+"_col").html("");
                                current.style.background = 'white';
                                current.innerText = "";
                            }
                            //e.target.style.background = 'linear-gradient(#fcffba, #fdbebe)';
                            e.target.innerText = name;
                            if(conn_list.indexOf(name) < 0){
                                conn_list.push(name);
                            }
                        })

                    //表名不存在
                    }else{
                        // 写进td
                        //$("#"+e.target.id).css("background", 'linear-gradient(#fcffba, #fdbebe)');
                        e.target.innerText = name;
                        if(conn_list.indexOf(name) < 0){
                            conn_list.push(name);
                        }
                    }

                }
                get_cols(name);
                e.dataTransfer.clearData("name");
                var cc = $(".conn_cell")
                for(var i = 0; i < cc.length; i++){
                    cc[i].style.background = 'white';
                    if(cc[i].innerText == "拖拽到此进行表连接"){
                        cc[i].innerText = "";

                    }
                }
                break;
        }
    }

    // 添加事件监听
    var conn_cells = document.getElementsByClassName("conn_cell");
    [].forEach.call(conn_cells,function(current,index){
        current.addEventListener("dragenter",conn_table,false);
        current.addEventListener("dragover",conn_table,false);
        current.addEventListener("dragleave",conn_table,false);
        current.addEventListener("drop",conn_table,false);
    });

    /* --------------------选中表的列------------------------------- */
    // 列点击事件
    function cell_click(){
        var temp_name = this.className.split(" ")[0]
        // 作为key
        if($("#select_key").attr('className') === "curr"){

            if($("."+temp_name).first().attr("isselect") == "true"){
                var name = $("."+temp_name).first().text();
                $("#select_key").text(name);
                $("#select_key").attr("className", "");
                $("#select_key").css("background", "#f6d1ff");
                group_key = temp_name;
                if($("#group_agg_name").val().length > 0 && column_list.length >= 2 && group_key.length > 0){
                    $("#group_bt").attr('class', 'layui-btn');
                }
            }else{
                $("#select_key").attr("className", "");
                $("#select_key").css("background", "#f6d1ff");
            }
        }else{

            if($(this).attr('isSelect') == 'false'){
                $("."+temp_name).attr('isSelect', 'true');
                $("."+temp_name).css('background', 'linear-gradient(#efe1e1, #6bbfe694)');
                column_list.push(temp_name);
            }else{
                $("."+temp_name).attr('isSelect', 'false');
                $("."+temp_name).css('background', 'linear-gradient(#efe1e1, #de91ce94)');
                $("."+temp_name).first().css('background', "linear-gradient(#f1f1f1, #ac6ed494)");
                column_list.forEach(function (item,index,arr){
                    if (item == temp_name) {
                        column_list.splice(index,1);
                    }
                });
                if($("#select_key").text() === $("."+temp_name).first().text()){
                    $("#select_key").attr("className", "");
                    $("#select_key").css("background", "#f6d1ff");
                    $("#select_key").text("选择key");
                    group_key = "";
                }
            }
            if(column_list.length > 0){
            $('#asc').attr('class', 'layui-btn');
            $('#desc').attr('class', 'layui-btn');
            $('#col_del').attr('class', 'layui-btn');

            if(column_list.length == 1){
                $("#split_bt").attr('class', 'layui-btn');
                $("#filter_bt").attr('class', 'layui-btn');

            }else{
                $("#split_bt").attr('class', 'layui-btn layui-btn-disabled');
                $("#filter_bt").attr('class', 'layui-btn layui-btn-disabled');

            }
            if(column_list.length >= 2 && $("#group_agg_name").val().length > 0 && group_key.length > 0){
                $("#group_bt").attr('class', 'layui-btn');
            }else{
                $("#group_bt").attr('class', 'layui-btn layui-btn-disabled');
            }

            if(column_list.length > 1){
                $("#merge_bt").attr('class', 'layui-btn');
            }else{
                $('#merge_bt').attr('class', 'layui-btn layui-btn-disabled');
            }


            if($("#fun_col_name").val().length > 0 && column_list.length > 1 && $("#func").val() != -1){
                $("#func_bt").attr('class', 'layui-btn');
            }else{
                $("#func_bt").attr('class', 'layui-btn layui-btn-disabled');
            }

            if($("#count_col_name").val().length > 0 && column_list.length > 0){
                $("#count_bt").attr('class', 'layui-btn');
            }else{
                $("#count_bt").attr('class', 'layui-btn layui-btn-disabled');
            }

            if($("#col_new_name").val().length > 0 && column_list.length === 1){
                $("#col_update").attr('class', 'layui-btn');
            }else{
                $("#col_update").attr('class', 'layui-btn layui-btn-disabled');
            }

        }else{
            $('#col_del').attr('class', 'layui-btn layui-btn-disabled');
            $('#split_bt').attr('class', 'layui-btn layui-btn-disabled');
            $('#asc').attr('class', 'layui-btn layui-btn-disabled');
            $('#desc').attr('class', 'layui-btn layui-btn-disabled');
            $('#func_bt').attr('class', 'layui-btn layui-btn-disabled');
            $('#filter_bt').attr('class', 'layui-btn layui-btn-disabled');
            $('#merge_bt').attr('class', 'layui-btn layui-btn-disabled');
            $('#count_bt').attr('class', 'layui-btn layui-btn-disabled');
            $("#col_update").attr('class', 'layui-btn layui-btn-disabled');
            $("#split_bt").attr('class', 'layui-btn layui-btn-disabled');
            $("#group_bt").attr('class', 'layui-btn layui-btn-disabled');

        }
        }
    }
    $(".cell").bind("click", cell_click);

    /* -----------------------删除文件---------------------------- */


    // 删除文件
    function delete_file(e){
        e.preventDefault();//阻止浏览器的默认事件
        switch(e.type){
            // 进入目标元素
            case 'dragenter':
                break;
            // 经过目标元素
            case 'dragover':
                break;
            // 离开目标元素
            case 'dragleave':
                break;
            // 释放元素
            case 'drop':
                if(e.dataTransfer.getData("className") == "conn_cell"){
                    // 删除表连接对象
                    var del_index;

                    var del_name = $("#"+e.dataTransfer.getData("id")).text();
                    if(e.dataTransfer.getData("conn_id").length > 0){
                        $("#"+e.dataTransfer.getData("conn_id")).html("");
                        $("#"+e.dataTransfer.getData("conn_id")+"_col").html("");
                        $("#sql_input").css('background','linear-gradient(#a1bcf5, #edbefd)');
                        $("#sql_input").html('<img src="/images/database.png" style="position: relative;" height="35" width="40">数据库导入表');
                    }
                    for(var i = 0; i < conn_list.length; i++){
                        if(conn_list[i] === del_name){
                            del_index = i;
                        }
                    }
                    conn_list.splice(del_index,1,conn_list[conn_list.length - 1]);
                    conn_list.pop();
                }else if(e.dataTransfer.getData("id").length > 0){
                    // 删除表
                    var del_index;

                    if(e.dataTransfer.getData("id").length > 0){
                        var del_name = $("#"+e.dataTransfer.getData("id")).text();
                        if(e.dataTransfer.getData("conn_id").length > 0){
                            $("#"+e.dataTransfer.getData("conn_id")).html("");
                            $("#"+e.dataTransfer.getData("conn_id")+"_col").html("");
                            $("#sql_input").css('background','linear-gradient(#a1bcf5, #edbefd)');
                            $("#sql_input").html('<img src="/images/database.png" style="position: relative;" height="35" width="40">数据库导入表');
                        }
                        for(var i = 0; i < conn_list.length; i++){
                            if(conn_list[i] === del_name){
                                del_index = i;
                            }
                        }
                        conn_list.splice(del_index,1,conn_list[conn_list.length - 1]);
                        conn_list.pop();

                        var name = e.dataTransfer.getData("name");
                        // 删除结果文件中含有的表名
                        var result_box_list = $('.result_box');
                        for(var i = 0; i < result_box_list.length; i++){
                            if(name == result_box_list[i].innerText){
                                console.log(result_box_list[i].innerText);
                                result_box_list[i].innerText = "";
                                $("#"+e.dataTransfer.getData("id").substr(1,2)).css('background', 'white');
                                result_box_list[i].style.background = "white";
                            }
                       }
                        // 删除连接表里该表的列
                        var conn_cells = $('.conn_cell');
                        for(var i = 0; i < conn_cells.length; i++){
                            if(name == conn_cells[i].innerText){
                                conn_cells[i].innerText = "";
                                $("#"+conn_cells[i].id+'_col').html("");
                            }
                        }
                        var del_id = e.dataTransfer.getData("id").substr(1,2);
                        var del_index = del_id.substr(1,1);
                        $.ajax({
                                type: "get",
                                url: "/delete_file/"+del_index
                                });
                        if(file_size >= 2){
                            $("#l"+(file_size-1)).css("background", "white");
                            var temp_name = $("#l"+(file_size-1)).text();
                            $("#"+del_id).text(temp_name);
                            $("#l"+(file_size-1)).text("");
                            file_list.splice(del_index,1,file_list[file_size-1]);
                            file_list.pop();
                            file_size --;
                        }else{
                            $("#"+del_id).text("");
                            $("#"+del_id).css("background", "white");
                            file_list.pop();
                            file_size --;
                        }
                    }
                    if(file_size == 0){
                        $("#data_head").html("");
                        $("#data_body").html("");
                    }
                }

                break;
        }
    }
    function update_title(e){
        var cc = $(".conn_cell")
        for(var i = 0; i < cc.length; i++){
            cc[i].style.background = 'white';
            if(cc[i].innerText == "拖拽到此进行表连接"){
                cc[i].innerText = "";
            }

        }
        $("#sql_input").css('background','linear-gradient(#a1bcf5, #edbefd)');
        $("#sql_input").html('<img src="/images/database.png" style="position: relative;" height="35" width="40">数据库导入表');
        var rr = $(".result_box");
        for(var i = 0; i < rr.length; i++){
           if(rr[i].innerText == '用作视图数据'){
              rr[i].innerText = "";
              rr[i].style.background = 'white';
           }
        }
    }
    // 添加事件监听
    var del_box = document.getElementById("sql_input");
    del_box.addEventListener("dragenter",delete_file,false);
    del_box.addEventListener("dragover",delete_file,false);
    del_box.addEventListener("dragleave",delete_file,false);
    del_box.addEventListener("drop",delete_file,false);
    /* ----------------------------数据库导入----------------------------- */

    // 数据库导入
    $("#sql_input").click(function (){
        var win = window.open('/get_conn_db', 'newwindow', 'height=600, width=500, top=150, left=300, toolbar=no, menubar=no, scrollbars=no, resizable=no, location=no, status=no');
        var timer = setInterval(function() {
            if(win.closed) {
                clearInterval(timer);
                $.ajax({
                    type: "get",
                    url: "/get_table_name",
                    contentType: "application/json;charset=UTF-8",
                    success: function(result){
                        if(result.status == "success"){
                           for(var i = 0; i < result.table_name.length; i++){
                                if(file_size < 10){
                                    $("#l"+file_size).text(result.table_name[i]);
                                    $("#l"+file_size).css("background", "linear-gradient(rgb(239, 220, 243), rgb(171, 255, 94))");
                                    $("#dl"+file_size).attr("isfile","true")
                                    document.getElementById("dl"+file_size).addEventListener("dragstart",dragStart,false);
                                    file_list.push(result.table_name[i]);
                                    file_size ++;
                                }
                           }
                           $.ajax({
                            type: "get",
                            url: "/clear_table_name"
                            });
                        }else{
                            return;
                        }
                    }
                });
            }
        }, 0);
    });
    /*----------------------------拖拽文件上传------------------------------*/

    // 拖拽上传文件
    function drag(e){
        e.preventDefault();//阻止浏览器的默认事件
        switch(e.type){
            // 进入目标元素
            case 'dragenter':
                $(".left-footer").css("border", "1vh dashed #000");
                $("#tips").text("释放即上传");
                break;
            // 经过目标元素
            case 'dragover':
                $("#tips").text("释放即上传");
                $()
                $(".left-footer").css("border", "1vh dashed #000");
                break;
            // 离开目标元素
            case 'dragleave':
                $(".left-footer").css("border", "1vh solid #000");
                $("#tips").text("拖拽或点击选择文件");
                break;
            // 释放元素
            case 'drop':
                var files = e.dataTransfer.files;
                $(".left-footer").css("border", "1vh solid #000");
                $("#tips").text("拖拽或点击选择文件");
                if(file_size < 10){
                    file_upload(files);
                }

                break;
        }
    }

    // 文件上传
    function file_upload(files){
        var file_limit = 0;
        // 遍历files
        [].forEach.call(files, function(current,index){
            if(file_limit < 1){
                file_limit ++;
                var temp = current.name.split(".");
                var suffix = temp[1]
                var fileName = temp[0]
                // 写上提示
                $("#l"+file_size).text("正在上传");
                $("#l"+file_size).css("transition", "1s");
                $("#l"+file_size).css("background", "linear-gradient(rgb(239, 220, 243), rgb(171 255 94 / 51%))");
                setTimeout(function(){
                    if(suffix == 'csv' || suffix == 'xlsx'){
                        var form = new FormData();
                        form.append('file', current);
                        $.ajax({
                            url: "/file_upload",
                            type: "POST",
                            data: form,
                            contentType: false,
                            processData: false,
                            beforeSend: function(){

                            },
                            success: function (result) {
                                // 上传成功
                                if(result.status === 'success'){
                                    $("#l"+file_size).text(fileName);
                                    $("#l"+file_size).css("background", "linear-gradient(rgb(239, 220, 243), rgb(171, 255, 94))");
                                    $("#dl"+file_size).attr("isfile","true")
                                    document.getElementById("dl"+file_size).addEventListener("dragstart",dragStart,false);
                                    file_list.push(fileName)
                                    file_size ++;
                                // 上传失败
                                }else{
                                    $("#l"+file_size).text("上传失败！");
                                    $("#l"+file_size).css("background", "#EE6363");
                                    setTimeout(function(){
                                        $("#l"+file_size).text("");
                                        $("#l"+file_size).css("background", "white");
                                        $("#l"+file_size).css("transition", "");
                                        }, 1000);
                                }

                            },
                            error: function () {
                                $("#l"+file_size).text("上传失败！");
                                $("#l"+file_size).css("background", "#EE6363");
                                setTimeout(function(){
                                    $("#l"+file_size).text("");
                                    $("#l"+file_size).css("background", "white");
                                    $("#l"+file_size).css("transition", "");
                                    }, 1000);
                            }
                        });
                    }else {
                        $("#l"+file_size).text("上传失败！");
                        $("#l"+file_size).css("background", "#EE6363");
                        setTimeout(function(){
                            $("#l"+file_size).text("");
                            $("#l"+file_size).css("background", "white");
                            $("#l"+file_size).css("transition", "");
                            }, 1500);
                    }
                }, 1500);
            }
        });
    }

    // 添加事件监听
    var box = document.getElementById("add_file");
    box.addEventListener("dragenter",drag,false);
    box.addEventListener("dragover",drag,false);
    box.addEventListener("dragleave",drag,false);
    box.addEventListener("drop",drag,false);


    // 点击上传文件
    $("#add_file").click(function(){$("#select_file").trigger('click')});
    $("#select_file").bind("change",function(){
            if(file_size < 10){
                file_upload(this.files);
                $("#select_file").val("");
            }
    });
    function dragStart(e) {
        e.dataTransfer.setData("Id", e.target.id);
    }
    /*----------------------拖拽传参--------------------------*/

    function setFileName(e){
        if($("#"+e.target.id.substr(1,2)).text().length > 0 && e.target.className == "drag_box"){
            e.dataTransfer.setData("name", $("#"+e.target.id.substr(1,2)).text());
            e.dataTransfer.setData("id", e.target.id);
            $("#sql_input").text("拖拽到此删除");
            $("#sql_input").css('background','linear-gradient(#f54444, #edbefd)');
            var cc = $(".conn_cell")
            for(var i = 0; i < cc.length; i++){
                if(cc[i].innerText.length == 0){
                    cc[i].innerText = "拖拽到此进行表连接";
                    cc[i].style.background = 'linear-gradient(rgb(239, 220, 243), rgb(255 135 94))';
                }
            }
           var rr = $(".result_box");
           for(var i = 0; i < rr.length; i++){
               if(rr[i].innerText.length == 0){
                  rr[i].innerText = "用作视图数据";
                  rr[i].style.background = 'linear-gradient(rgb(239, 220, 243), rgb(255 135 94))';
               }
           }
        }
    }
</script>
